<template>
  <div id="app" @mouseenter.stop="winShow" @mouseleave.stop="winHide">
    <div class="mask"></div>
    <div class="drag-nav">
      <b>{{ appName }}</b>
    </div>
    <div class="nav">
      <div class="link" ref="nav_link">
        <router-link draggable="false" contenteditable="false" to="/can"
          >日程</router-link
        >
        <!-- <router-link draggable="false" to="/done">已完成</router-link> -->
        <router-link draggable="false" contenteditable="false" to="/todo"
          >时间线</router-link
        >
        <router-link
          draggable="false"
          contenteditable="false"
          to="/icon?pagename=最近"
          >桌面整理</router-link
        >
        <router-link
          draggable="false"
          contenteditable="false"
          to="/wallfall/wallpaper?cid=0"
          >壁纸库</router-link
        >
        <router-link draggable="false" contenteditable="false" to="/shedule"
          >提醒</router-link
        >
        <router-link draggable="false" contenteditable="false" to="/music"
          >音乐</router-link
        >
      </div>
      <a class="nav_btn" v-on:click="moveLeft()">⬅️</a>
      <a class="nav_btn" v-on:click="moveRight()">➡️</a>
      <div class="tools">
        <transition-group name="fade" mode="out-in">
          <i
            :class="[
              'iconfont',
              isMaxHeightWindow
                ? 'icon-fullscreen-shrink'
                : 'icon-fullscreen-expand'
            ]"
            key="fullscreen"
            @click="SwitchWindowSize"
            title="切换大小窗口"
          ></i>
          <i class="iconfont icon-export" key="export" @click="exportData" title="导出"></i>
          <i class="iconfont icon-eye-close" key="hide" @click="hideWindow" title="隐藏窗口"></i>
          <i
            :class="['iconfont', ignoreMouse ? 'icon-lock' : 'icon-unlock']"
            key="lock"
            @click="isMoveNeed"
            title="窗口贴边锁定切换"
          ></i>
        </transition-group>
      </div>
    </div>
    <div class="main scrollbar scrollbar-y">
      <transition name="fade-transform" mode="out-in">
        <!-- <keep-alive> -->
        <router-view style="width:100%;height:100%" />
        <!-- </keep-alive> -->
      </transition>
    </div>
  </div>
</template>

<script>
import pkg from "../package.json";
import { ipcRenderer } from "electron";
import moment from "moment";
import schedule from "node-schedule";
import DB from "./utils/db";
export default {
  components: {},
  data() {
    return {
      appName: pkg.name,
      ignoreMouse: true,
      isMaxHeightWindow: false
    };
  },

  methods: {
    isMoveNeed() {
      this.ignoreMouse = !this.ignoreMouse;
      if (this.ignoreMouse) return;
      ipcRenderer.invoke("isMoveNeed");
      this.$layer.msg("将窗口向右移动后会自动贴边哦！");
    },
    winShow() {
      if (this.ignoreMouse) return;
      ipcRenderer.invoke("winShow");
    },
    winHide() {
      if (this.ignoreMouse) return;
      ipcRenderer.invoke("winHide");
    },
    exportData() {
      ipcRenderer.invoke("exportData");
    },
    hideWindow() {
      ipcRenderer.invoke("hideWindow");
    },
    moveLeft() {
      this.$refs.nav_link.scrollLeft = this.$refs.nav_link.scrollLeft - 100;
      //this.$refs.nav_link.animate([{scrollTop:this.$refs.nav_link.scrollLeft},{scrollTop:this.$refs.nav_link.scrollLeft-100}], {duration: 1000,iterations: Infinity})
    },
    moveRight() {
      this.$refs.nav_link.scrollLeft = this.$refs.nav_link.scrollLeft + 100;
    },
    SwitchWindowSize() {
      ipcRenderer.invoke("switchWindowSize");
      this.isMaxHeightWindow = !this.isMaxHeightWindow;
    },
    openMusicPlayer() {
      ipcRenderer.invoke("music");
    }
  },
  mounted() {
    let sortschedulelistByTime;
    //设置每分钟运行一次，检测时间是否满足要求
    schedule.scheduleJob("*/1 * * * *", function() {
      sortschedulelistByTime = DB.sortschedulelistByTime();
      for (let i of sortschedulelistByTime) {
        if (i.time == moment().format("HH:mm")) {
          // 发出通知并弹窗
          new Notification("定时任务提醒", {
            body: i.content
          });
        }
      }
    });

    //定时切换壁纸
    var wallpaperIndex = 0;
    var autoChangeWallpaper = schedule.scheduleJob("*/1 * * * * ", function() {
      if (DB.get("settings.autoChangeWallpaper")) {
        var favoritelist = DB.get("favoritelist");
        ipcRenderer.invoke(
          "setWallPaperViaUrlSilently",
          favoritelist[wallpaperIndex % favoritelist.length].url
        );
        wallpaperIndex++;
      }
      console.log(autoChangeWallpaper + "定时器触发");
    });
  }
};
</script>

<style lang="scss" scoped>
#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 151px);
  background-color: rgba($color: #000000, $alpha: 0.6);
  border-radius: 5px 5px 0 0;
  .mask {
    display: none;
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
  }
  .drag-nav {
    -webkit-app-region: drag;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 75%;
    height: 20px;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 12px;
    b,
    i {
      color: rgba($color: #ffffff, $alpha: 0.3);
    }
  }
  .nav {
    display: flex;
    justify-content: center;
    padding: 0 20px;
    color: #cccccc;
    user-select: none;
    padding-bottom: 10px;
    .link {
      white-space: nowrap;
      padding-top: 17px;
      text-align: center;
      margin-bottom: 10px;
      // width: 300px;
      overflow-x: scroll;
      overflow-y: hidden;
      a {
        border-radius: 12px;

        padding: 10px;
        font-size: 15px;
        font-weight: bold;
        color: #cccccc;
        text-decoration: none;
        &.router-link-exact-active {
          font-size: 20px;
          color: #ffffff;
        }
        &:hover {
          color: #ffffff;
          background-color: #383838;
        }
      }
    }
    .tools {
      position: absolute;
      top: 0px;
      height: 25px;
      right: 0;
      display: flex;
      i {
        font-size: 20px;
        line-height: 26px;
        padding: 0 5px;
        cursor: pointer;
      }
    }
  }
  .main {
    flex: 1;
    overflow-y: auto;
    &:hover::-webkit-scrollbar-thumb {
      display: block;
    }
  }
}
#app.unfocused {
  opacity: 0.8;
  .mask {
    display: block;
  }
  .tools {
    z-index: 1000;
  }
}

::-webkit-scrollbar {
  width: 4px !important;
}

.link::-webkit-scrollbar {
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 0px;
}
.link::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #02adf7;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

.link::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #1b5aa9;
}
.nav_btn {
  text-align: center;
  width: 30px;
  height: 20px;
  margin: 0 auto;
  margin-top: 10px;
  background: rgba($color: #000000, $alpha: 0);
  border-radius: 12px;
  padding: 10px;
  font-size: 15px;
  font-weight: bold;
  color: #cccccc;
  text-decoration: none;
// 不再需要切换按钮，先隐藏
  display: none;

  &.router-link-exact-active {
    font-size: 20px;
    color: #ffffff;
  }
  &:hover {
    color: #050505;
    background-color: #383838;
  }
}
</style>
